<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CodeMirror.js Example</title>
  <link rel="stylesheet" href="node_modules/@codemirror/theme/material.css">
</head>
<body>
  <textarea id="code"></textarea>
  <script src="node_modules/@codemirror/state/dist/state.es.js"></script>
  <script src="node_modules/@codemirror/view/dist/view.es.js"></script>
  <script src="node_modules/@codemirror/basic-setup/dist/basic-setup.es.js"></script>
  <script src="node_modules/@codemirror/commands/dist/commands.es.js"></script>
  <script src="node_modules/@codemirror/lang-javascript/dist/lang-javascript.es.js"></script>
  <script src="node_modules/@codemirror/theme-material/dist/theme-material.es.js"></script>
  <script>
    // 创建编辑器
    const codeEditor = document.getElementById('code');
    const state = EditorState.create({
      doc: 'function greeting() {\n  console.log("Hello, World!");\n}\n',
      extensions: [
        basicSetup,
        EditorState.allowMultipleSelections.of(true),
        javascript(),
        MaterialTheme
      ]
    });
    const view = new EditorView({
      state,
      parent: codeEditor
    });
  </script>
</body>
</html>
